<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./01.css">
</head>

<body>
    <div class="box">
        <div class="zuo">
            <p class="z1">基本设置</p>
            <p class="z2">安全设置</p>
            <p class="z2">账号设置</p>
            <p class="z2">新消息通知</p>
        </div>
        <div class="toast mytoast" data-bs-delay="1000">
            <div class="toast">
                <div class="alert alert-success info">
                    <!-- 操作成功 -->
                </div>
            </div>
        </div>
        <div class="zhong">
            <form class="form" action="javascript:;" name="">
                <!-- <div class="top"> -->
                <h3>基本设置</h3>
                <!-- </div> -->
                <!-- <div class="d1"> -->
                <p> 邮箱</p>
                <input type="text" class="emile" name="email" value="">
                <!-- </div> -->
                <!-- <div class="d2"> -->
                <p>昵称</p>
                <input type="text" class="name" name="nickname" value="">
                <!-- </div> -->
                <!-- <div class="d3"> -->
                <p>性别</p>
                <!-- <input type="radio" class="gender" name="gender" value="0">男<span class="s1">男</span> -->
                <input type="radio" class="gender" name="gender" value="0">男
                <input type="radio" class="gender" name="gender" value="1">女
                <!-- <input type="radio" class="gender" name="gender" value="1">女<span class="s2">女</span> -->
                <!-- </div> -->
                <!-- <div class="d4"> -->
                <p>个人简介</p>
                <textarea class="wenben" name="desc" value="" placeholder="请输入个人简介"></textarea>
                <!-- </div> -->
                <button class="tj">提交</button>
            </form>
        </div>

        <div class="you">
            <p>头像</p>
            <img src="./图片/1.jpg" class="img">
            <input type="file" class="upp">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script src="./form-serialize.js"></script>
    <script>
        const creator='King'
        const form=document.querySelector('.form');
        const xuan=()=>{
            axios({
                url:"https://hmajax.itheima.net/api/settings",
                params:{creator}
            }).then(res=>{
                const {data}=res.data
                Object.keys(data).forEach(item=>{
                    if(item==='avatar'){
                        document.querySelector('.img').src=data[item]
                    }else if(item==='gender'){
                       const gender= document.querySelectorAll('[name=gender]')
                       const index=data[item]
                       gender[index].checked=true
                    }else{
                        form.querySelector(`[name='${item}']`).value=data[item]
                    }
                })
            })
        }
        xuan()

        //更改图片
        document.querySelector('.upp').addEventListener('change',e=>{
            const fd=new FormData
            fd.append('avatar',e.target.files[0])
            fd.append('creator',creator)
            axios({
                url:"https://hmajax.itheima.net/api/avatar",
                method:"PUT",
                data:fd
            }).then(res=>{
                document.querySelector('.info').value=res.data.message
                document.querySelector('.img').src=res.data.data.avatar
            })
        })
        //提交
        document.querySelector('.tj').addEventListener('click',e=>{
            const obj=serialize(form,{hash:true,empty:true})
            obj.creator=creator;
            obj.gender=+obj.gender
            axios({
                url:"https://hmajax.itheima.net/api/settings",
                method:"PUT",
                data:obj
            }).then(res=>{
                document.querySelector('.info').value=res.data.message
            })
        })
    </script>
</body>

</html>